<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<%@ page import="java.sql.*" %>
<%@ page import="java.io.*" %> 
<head>
<title>Minerva</title>
<link href="style.css" rel="stylesheet" type="text/css" />

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" href="jquery-ui.css" type="text/css">
<link rel="stylesheet" href="DataTables-1.9.0/DataTables-1.9.0/media/css/jquery.dataTables.css" type="text/css">
<script type="text/javascript" src="DataTables-1.9.0/DataTables-1.9.0/media/js/jquery.js">
</script>
<script type="text/javascript" src="jquery-ui-1.8.18.custom/js/jquery-ui-1.8.18.custom.min.js">
</script>
	<script src="jquery-ui-1.8.18.custom/development-bundle/ui/jquery.ui.core.js"></script>
	<script src="jquery-ui-1.8.18.custom/development-bundle/ui/jquery.ui.widget.js"></script>
	<script src="jquery-ui-1.8.18.custom/development-bundle/ui/jquery.ui.tabs.js"></script>
    <script src="DataTables-1.9.0/DataTables-1.9.0/media/js/jquery.dataTables.js">
    </script>
	
	<script>
	jQuery.fn.center = function () {
		this.css("position","absolute");
		this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
		this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
		return this;
	}
				
	$(function() {
		$( "#tabs" ).tabs();
        var i=0;
		//for(i=1;i<8;i++)
		$("#example1").dataTable();
         alert("Hello");
		 
		 	$("#thumbnail p").click(function(e){
		
			$("#background").css({"opacity" : "0.7"})
							.fadeIn("slow");			
						
			$("#large").html("<img src='"+$(this).parent().attr("href")+"' alt='"+$(this).attr("alt")+"' />").center()
					   .fadeIn("slow");			
			
			return false;});
			
			
			
			
					$(document).keypress(function(e){
			if(e.keyCode==27){
				$("#background").fadeOut("slow");
				$("#large").fadeOut("slow");
			}
		});
		
		
		
	$("#background").click(function(){
			$("#background").fadeOut("slow");
			$("#large").fadeOut("slow");
		});
		
		$("#large").click(function(){
			$("#background").fadeOut("slow");
			$("#large").fadeOut("slow");
		});

	});
		function closeFnc()
		{
			$("#background").fadeOut("slow");
			$("#large").fadeOut("slow");
		
			}		 


	</script>
<style>

/*#panel{
    width:100px;
    height:100px;
    background:none;
}
#close{
    display:block;
    float:right;
    width:30px;
    height:29px;
    background:url(close.png) no-repeat center center;
}
*/

img {
	border: none;
}
#thumbnail img {
	cursor: pointer;	
}
#large {
	display: none;
	position: absolute;		
	background: #FFFFFF;	
	padding: 5px;
	z-index: 10;
	min-height: 200px;
	min-width: 200px;
	color: #336699;
}
#background{
	display: none;
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	background: #000000;	
	z-index: 1;
}
</style>
</head>
<body>
    <p>&nbsp;</p>
<div id="wrap2">
  <div id="masthead">
    <h1>&nbsp;</h1>
    <p>&nbsp;</p>

    <h3><span style="color: #3484B1; font-size: x-large; font-weight: bold;">Minerva Wiki</span></h3>
  </div>
  
  <p>&nbsp;</p>
  <div id="container">
     <div id="content">
      <p> Discussions, documents, videos and images related to Minverva can be viewed here.</p>
       </div>
           <div id="tabsContainer">
<div id="tabs">
	<ul>
		<li><a href="#tabs-1" class="tabHeader"><h4><span style="color: #3484B1;">Music</h4></a></li>
		<li><a href="#tabs-2" class="tabHeader"><h4><span style="color: #3484B1;">Sufi/Salafi</h4></a></li>
		<li><a href="#tabs-3" class="tabHeader"><h4><span style="color: #3484B1;">Sin in Public Places</h4></a></li>
        <li><a href="#tabs-4" class="tabHeader"><h4><span style="color: #3484B1;">Muslim Youth</h4></a></li>
   		<li><a href="#tabs-5" class="tabHeader"><h4><span style="color: #3484B1;">Women</h4></a></li>
   		<li><a href="#tabs-6" class="tabHeader"><h4><span style="color: #3484B1;">Quran Exergesis</h4></a></li>
   		<li><a href="#tabs-7" class="tabHeader"><h4><span style="color: #3484B1;">Secularism & Muslim identity</h4></a></li>
	</ul>
	<div id="tabs-1">
		
		<table cellpadding="0" cellspacing="0" border="0" class="display" id="example1" width="100%">
		  <thead>
          <tr>
		    <th>Date</th>
		    <th>Subject</th>
		    <th>From</th>
		    <th>Attachments</th>
		    </tr>
            </thead>
            <tbody>
                <%
				try {
				/* Create string of connection url within specified format with machine
				name, port number and database name. Here machine name id localhost and 
				database name is student. */
				String connectionURL = "jdbc:mysql://localhost/emaildb";
				// declare a connection by using Connection interface
				Connection connection = null;
				/* declare object of Statement interface that is used for executing sql 
				statements. */
				Statement statement = null;
				// declare a resultset that uses as a table for output data from tha table.
				ResultSet rs = null;
				// Load JBBC driver "com.mysql.jdbc.Driver"
				Class.forName("com.mysql.jdbc.Driver").newInstance();
				/* Create a connection by using getConnection() method that takes parameters 
				of string type connection url, user name and password to connect to database.*/
				connection = DriverManager.getConnection(connectionURL, "root", "");
				/* createStatement() is used for create statement object that is used for 
				sending sql statements to the specified database. */
				statement = connection.createStatement();
				// sql query to retrieve values from the secified table.
				String QueryString = "SELECT * from emaildata2";
				rs = statement.executeQuery(QueryString);
				
				    
				%>
				  
			 <%
					while (rs.next()) {
			  %>
			  
				<tr class="row">
				<td><%=rs.getString(1)%></td>
				<td><a href="emailBody.jsp?body=#{<%=rs.getString(2)%>}"><%=rs.getString(2)%></a></td>
				<td><%=rs.getString(4)%></td>
				</tr>
				<% } %>
				<%
				// close all the connections.
				rs.close();
				statement.close();
				connection.close();
				} catch (Exception ex) {
				%>
				
				<%
				//out.println("Unable to connect to database.");
				ex.printStackTrace();
				}
				%>
            </tbody>
  			<tfoot>
            <tr>
		    <th>Date</th>
		    <th>Subject</th>
		    <th>From</th>
		    <th>Attachments</th>
		    </tr>
            </tfoot>
		  </table>
		<p>&nbsp;</p>
		
	</div>
	<div id="tabs-2">
	
		<table width="473" border="1" id="example2">
		  <tr>
		    <th width="78" scope="col">Date</th>
		    <th width="81" scope="col">Subject</th>
		    <th width="114" scope="col">From</th>
		    <th width="134" scope="col">Attachments</th>
		    </tr>
		  <tr>
		    <td>Sample data</td>
		    <td>Sample data</td>
		    <td>Sample data</td>
		    <td>Sample data</td>
		    </tr>
		  <tr>
		    <td>Sample data</td>
		    <td>Sample data</td>
		    <td>Sample data</td>
		    <td>Sample data</td>
		    </tr>
		  <tr>
		    <td>Sample data</td>
		    <td>Sample data</td>
		    <td>Sample data</td>
		    <td><p>Sample data</p></td>
		    </tr>
		  </table>
		<p>&nbsp;</p>
		
	</div>
	<div id="tabs-3">
	
		<table width="473" border="1" id="example3">
		  <tr>
		    <th width="78" scope="col">Date</th>
		    <th width="81" scope="col">Subject</th>
		    <th width="114" scope="col">From</th>
		    <th width="134" scope="col">Attachments</th>
		    </tr>
		  <tr>
		    <td>Sample data</td>
		    <td>Sample data</td>
		    <td>Sample data</td>
		    <td>Sample data</td>
		    </tr>
		  <tr>
		    <td>Sample data</td>
		    <td>Sample data</td>
		    <td>Sample data</td>
		    <td>Sample data</td>
		    </tr>
		  <tr>
		    <td>Sample data</td>
		    <td>Sample data</td>
		    <td>Sample data</td>
		    <td><p>Sample data</p></td>
		    </tr>
		  </table>
		<p>&nbsp;</p>
		
	</div>
    	<div id="tabs-4">
		
		<table width="473" border="1" id="example4">
		  <tr>
		    <th width="78" scope="col">Date</th>
		    <th width="81" scope="col">Subject</th>
		    <th width="114" scope="col">From</th>
		    <th width="134" scope="col">Attachments</th>
		    </tr>
		  <tr>
		    <td>Sample data</td>
		    <td>Sample data</td>
		    <td>Sample data</td>
		    <td>Sample data</td>
		    </tr>
		  <tr>
		    <td>Sample data</td>
		    <td>Sample data</td>
		    <td>Sample data</td>
		    <td>Sample data</td>
		    </tr>
		  <tr>
		    <td>Sample data</td>
		    <td>Sample data</td>
		    <td>Sample data</td>
		    <td><p>Sample data</p></td>
		    </tr>
		  </table>
		<p>&nbsp;</p>
		
	    </div>
    	<div id="tabs-5">
	>
		<table width="473" border="1" id="example5">
		  <tr>
		    <th width="78" scope="col">Date</th>
		    <th width="81" scope="col">Subject</th>
		    <th width="114" scope="col">From</th>
		    <th width="134" scope="col">Attachments</th>
		    </tr>
		  <tr>
		    <td>Sample data</td>
		    <td>Sample data</td>
		    <td>Sample data</td>
		    <td>Sample data</td>
		    </tr>
		  <tr>
		    <td>Sample data</td>
		    <td>Sample data</td>
		    <td>Sample data</td>
		    <td>Sample data</td>
		    </tr>
		  <tr>
		    <td>Sample data</td>
		    <td>Sample data</td>
		    <td>Sample data</td>
		    <td><p>Sample data</p></td>
		    </tr>
		  </table>
		<p>&nbsp;</p>
		
	    </div>
    	<div id="tabs-6">
		
		<table width="473" border="1" id="example6">
		  <tr>
		    <th width="78" scope="col">Date</th>
		    <th width="81" scope="col">Subject</th>
		    <th width="114" scope="col">From</th>
		    <th width="134" scope="col">Attachments</th>
		    </tr>
		  <tr>
		    <td>Sample data</td>
		    <td>Sample data</td>
		    <td>Sample data</td>
		    <td>Sample data</td>
		    </tr>
		  <tr>
		    <td>Sample data</td>
		    <td>Sample data</td>
		    <td>Sample data</td>
		    <td>Sample data</td>
		    </tr>
		  <tr>
		    <td>Sample data</td>
		    <td>Sample data</td>
		    <td>Sample data</td>
		    <td><p>Sample data</p></td>
		    </tr>
		  </table>
		<p>&nbsp;</p>
		
	    </div>
    	<div id="tabs-7">
		
		<table width="473" border="1" id="example7">
		  <tr>
		    <th width="78" scope="col">Date</th>
		    <th width="81" scope="col">Subject</th>
		    <th width="114" scope="col">From</th>
		    <th width="134" scope="col">Attachments</th>
		    </tr>
		  <tr>
		    <td>Sample data</td>
		    <td>Sample data</td>
		    <td>Sample data</td>
		    <td>Sample data</td>
		    </tr>
		  <tr>
		    <td>Sample data</td>
		    <td>Sample data</td>
		    <td>Sample data</td>
		    <td>Sample data</td>
		    </tr>
		  <tr>
		    <td>Sample data</td>
		    <td>Sample data</td>
		    <td>Sample data</td>
		    <td><p>Sample data</p></td>
		    </tr>
		  </table>
		<p>&nbsp;</p>
		
	    </div>
</div>
</div>
    <p>&nbsp;</p>
    <div id="tableDiv">
    
    </div>
</div>
  <div id="footer"> </div>
     <div id="large"></div>   
<div id="background"></div>
</div>
</body>
</html>
